<!--电影条目-->
<template>
  <div class="movie_item">
    <div>
      <div class="img_box">
        <img src="@/assets/image/banner/1.jpg" />
      </div>
      <div class="sub_box">
        <router-link to="/life/movie/detail">
          <div>
            <span class="lt_tag">动作，犯罪</span>
            <h5>这个杀手不太冷</h5>
          </div>
          <ul class="sub_list">
            <li>
              <span>导演：</span>
              <span>小李子</span>
            </li>
            <li>
              <span>主演：</span>
              <span>让.雷诺</span>
            </li>
            <li>
              <span>地区：</span>
              <span>法国</span>
            </li>
          </ul>
          <div class="introduce">这是一部浪漫凄婉的爱情故事。。。</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.movie_item {
  margin: 0 0 15px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 0;
  overflow: hidden;
  .img_box {
    position: relative;
    float: left;
    width: 240px;
    height: 145px;
    overflow: hidden;
    margin: 20px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .sub_box {
    margin-left: 255px;
    height: 160px;
    padding: 21px 20px 0 3px;
    h5 {
      font-size: 21px;
      color: #000;
      display: inline-block;
    }
    .sub_list {
      margin-top: 5px;
      li {
        span {
          &:nth-child(odd) {
            font-size: 13px;
            color: #666;
          }
          &:nth-child(even) {
            font-size: 14px;
            color: #000;
          }
        }
      }
    }
    .introduce {
      line-height: 22px;
      font-size: 16px;
      color: #454545;
      margin: 7px 0;
    }
  }
}
</style>
